<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>匿名树洞 - 安心倾诉的地方</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.3/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
</head>
<body>
    <div class="container-fluid">
        <!-- 顶部提示 -->
        <div class="header-section text-center py-5">
            <h1 class="display-4 text-primary mb-3">
                <i class="fas fa-tree"></i> 匿名树洞
            </h1>
            <p class="lead text-muted">
                在这里，你可以安心倾诉那些无法与人分享的心事<br>
                <small class="text-secondary">每一条心声都值得被温柔对待</small>
            </p>
        </div>

        <!-- 发布区域 -->
        <div class="row justify-content-center mb-5">
            <div class="col-12 col-md-8 col-lg-6">
                <div class="card shadow-sm">
                    <div class="card-body">
                        <h5 class="card-title mb-3">
                            <i class="fas fa-heart text-danger"></i> 把心事投进树洞
                        </h5>
                        <form id="postForm">
                            <div class="mb-3">
                                <textarea 
                                    class="form-control" 
                                    id="postContent" 
                                    rows="4" 
                                    placeholder="在这里写下你想说的话...（最多500字）"
                                    maxlength="500"
                                    required
                                ></textarea>
                                <div class="form-text">
                                    <span id="charCount">0</span>/500
                                </div>
                            </div>
                            <button type="submit" class="btn btn-primary w-100">
                                <i class="fas fa-paper-plane"></i> 投进树洞
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <!-- 帖子列表 -->
        <div class="row justify-content-center">
            <div class="col-12 col-md-8 col-lg-6">
                <div id="postsContainer">
                    <div class="text-center py-5">
                        <div class="spinner-border text-primary" role="status">
                            <span class="visually-hidden">加载中...</span>
                        </div>
                        <p class="mt-3 text-muted">正在加载树洞中的心声...</p>
                    </div>
                </div>
                <div id="loadMore" class="text-center py-3" style="display: none;">
                    <button class="btn btn-outline-primary" onclick="loadMorePosts()">
                        <i class="fas fa-arrow-down"></i> 加载更多
                    </button>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.3/js/bootstrap.bundle.min.js"></script>
    <script src="js/app.js"></script>
</body>
</html>
